<template>
  <div style="margin-top: 10px">
    <div
      v-for="art in articleList.slice(0, 3)"
      :key="art.title"
      class="van-coupon van-cell art"
      role="button"
      tabindex="0"
      style="width: auto"
      @click="toArticleDetail(art)"
    >
      <div
        class="
          van-cell__value van-cell__value--alone
          van-contact-card__value
          definContent
        "
      >
        <div class="car_title">
          {{ art.title }}
        </div>
        <div class="ell_1">{{ art.introduction }}</div>
        <div>
          <div style="display: inline-block; color: #505050; font-size: 12px">
            {{ art.updateAt }}
          </div>
        </div>
      </div>
      <div class="van-image" style="width: 130px">
        <img
          :src="art.imgUrl"
          class="van-image__img"
          style="object-fit: cover"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useArticle } from '../home'
import { useRouter } from 'vue-router'

const router = useRouter()

const { articleList } = useArticle()

const toArticleDetail = (art: any) => {
  const id = art.id
  router.push({
    name: 'ArticleDetail',
    params: { id },
  })
}
</script>

<style lang="less" scoped>
@import '../style/card.less';
</style>
